<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh" class="h-full">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <title>注册</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css" rel="stylesheet" />


    <script src="sources/js/jquery-1.11.3.js"></script>
    <script src="sources/bootstrap/js/bootstrap.js"></script>
    <script src="sources/sweetalert/sweetalert2.min.js"></script>
    <script src="sources/js/util.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript"  src="sources/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript"   src="sources/ueditor/ueditor.all.js"></script>
    <script type="text/javascript"  src="sources/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript"  src="sources/ueditor/ueditor.parse.js"></script>

</head>
<body class="h-full bg-gray-300">
<div class="flex items-center justify-center h-full">
    <div class="flex max-w-3xl">
        <div class="bg-white w-1/2 p-8">
            <h1 class="text-gray-700 text-3xl text-center mb-4">用户注册</h1>
            <form action="user" method="post" class="text-gray-600">
                <input type="hidden" name="actionName" value="regist"/>
                <div class="my-3">
                    用户名<input type="text" name="uname" id="uname" placeholder="请输入用户名" class="border rounded w-full py-2 px-4 outline-none focus:shadow-outline" />
                </div>
                <div class="my-3">
                    密&emsp;码<input type="password" name="upwd" id="upwd" placeholder="请输入密码" class="border rounded w-full py-2 px-4 outline-none focus:shadow-outline" />
                </div>
                <div class="my-3 flex justify-between">
                    <label><input type="checkbox"/>同意《服务条款》、《隐私政策》和《儿童隐私政策》</label>
                </div>
                <div class="my-6 flex">
                    <button type="submit" id="btn" class="border rounded w-1/2 py-2 border-blue-700 bg-blue-600 text-white ml-2">注册</button>
                    <span>&emsp;</span>
                    <button type="reset" class="border rounded w-1/2 py-2 ">清空</button>
                </div>
                <div class="my-6 flex">
                    <span style="color: red;font-size: 16px;height: 24px;" id="msg"></span>
                </div>
                <div class="my-3 text-center text-xs text-gray-200">
                </div>
            </form>
        </div>
        <div class="w-1/2" backgroundColor="#FFFFFF">
            <img src="./sources/images/R-C.jpg"  alt="" class="w-full h-full  object-cover"/>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#uname").blur(function (){
        console.log("失焦");
        var name=$("#uname").val();
        console.log(name);
        if(isEmpty(name)){
            $("#msg").html("用户名不能为空")
            $("#btn").prop("disabled",true);
            return;
        }
        $.ajax(
            {
                type:"get",
                url:"user",
                data:{
                    actionName:"checkName",
                    uname:name
                },
                success:function (code){
                    console.log("code="+code);
                    if(code==1){
                        $("#msg").html("")
                        $("#btn").prop("disabled",false);
                    }else{
                        $("#msg").html("该用户名已存在，请重新输入")
                        $("#btn").prop("disabled",true);
                    }
                }
            }
        );
    }).focus(function () {
        $("#msg").html("")
        $("#btn").prop("disabled",false);
    });

    function checkUname(){
        var uname =$("#uname").val();
        if(isEmpty(uname)){
            $("#msg").html("用户名不能为空")
            $("#btn").prop("disabled",true);
            return false;
        }
        return true;
    }
</script>
</body>
</html>
